<template>
  <div class="eduexperience-module">
    <div class="module-title">
      <span>在校经历</span>
      <i class=" jl_font">&#xe621;</i>
    </div>
    <div class="edit-box">
      <div class="clearfix">
        <div class="create">
          <el-button type="warning" @click="create">添加在校经历</el-button>
        </div>
         <el-dialog
          title="删除" :visible.sync="deleteDialog" size="tiny">
          <span>是否要删除此内容</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialog = false">取 消</el-button>
            <el-button type="primary" :loading="deleteLoading" @click="deleteConfirm">确 定</el-button>
          </span>
        </el-dialog>
        <div class="list-item-box" v-for="(item,index) in Data" :key="'eduexperience'+item">
          <div v-if="item._id!=0" class="deleteItem">
            <el-button type="danger" icon="close" size="mini" @click="showDeleteDialog(item._id,index)" :loading="deleteLoading">删除</el-button>
          </div>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="12">
              <div class="form_groun">
                <label class="label right">类型</label>
                <div class="select-box">
                  <el-select v-model="item.type_id" placeholder="请选择">
                  <el-option v-for="itemOption in type_id_option" :key="itemOption.value" :label="itemOption.label" :value="itemOption.value">
                  </el-option>
                </el-select>
                </div>
              </div>
            </el-col>
             <el-col :xs="24" :sm="24" :md="12" :lg="12">
              <div class="form_groun">
                <label class="label right">
                  {{item.type_id==1?'社团名称':item.type_id==2?'职务名称':item.type_id==3?"奖学金名称":item.type_id==4?"竞赛名称":"获奖名称"}}
                </label>
                <el-input v-model="item.title" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" v-if="item.type_id=='1'">
              <div class="form_groun">
                <label class="label right">职位名称</label>
                <el-input v-model="item.position" placeholder="请输入职务"></el-input>
              </div>
            </el-col>
             <el-col :xs="24" :sm="24" :md="12" :lg="12">
              <div class="form_groun">
                <label class="label right">
                  {{item.type_id==1?'开始时间':item.type_id==2?'开始时间':item.type_id==3?"获得时间":item.type_id==4?"获得时间":"获得时间"}}
                </label>
                <el-date-picker type="date" format="yyyy-MM-dd" placeholder="选择日期" v-model="item.start_time" style="width: 100%;"></el-date-picker>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" v-if="item.type_id==1 || item.type_id==2">
              <div class="form_groun">
                <label class="label right">结束时间</label>
                <el-date-picker type="date" format="yyyy-MM-dd" placeholder="选择日期" v-model="item.end_time" style="width: 100%;"></el-date-picker>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12">
              <div class="form_groun">
                <label class="label right">描述</label>
                <el-input v-model="item.description" type="textarea" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            </el-row>
        </div>
        <div class="save-btn-main" v-if="Data.length>0">
          <el-row :gutter='10'>
            <el-col :span="24">
              <el-button type="primary" @click="submitForm">保存</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import { saveResumeEduE, deleteResumeEduE } from "api";
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      type: "eduExperience",
      Data: this.value,
      deleteLoading: false,
      deleteDialog: false,
      deleteId: "",
      deleteIndex: "",
      type_id_option: [
        {
          value: "1",
          label: "社团"
        },
        {
          value: "2",
          label: "职务"
        },
        {
          value: "3",
          label: "奖学金"
        },
        {
          value: "4",
          label: "竞赛经历"
        },
        {
          value: "5",
          label: "获奖经历"
        }
      ],
      defaultForm: {
        _id: 0,
        type_id: "1", //类型
        title: "", //名称
        position: "", //职位名称
        start_time: "", //公司名称
        end_time: "", //职位名称
        description: "" //描述
      }
    };
  },
  methods: {
    create() {
      this.Data.push(_.cloneDeep(_.assign({}, this.defaultForm)));
    },
    showDeleteDialog(id, index) {
      this.deleteId = id;
      this.deleteIndex = index;
      this.deleteDialog = true;
    },
    deleteConfirm() {
      this.deleteLoading = true;
      this.$promise
        .post(deleteResumeEduE, {
          id: this.deleteId
        })
        .then(resp => {
          this.deleteLoading = false;
          if (resp.status == 1) {
            this.deleteDialog = false;
            this.Data.splice(this.deleteIndex, 1);
            this.$message({
              message: "删除成功",
              type: "success"
            });
          } else {
            this.$message({
              message: resp.msg,
              type: "error"
            });
          }
        });
    },
    submitForm() {
      this.$promise
        .post(saveResumeEduE, {
          eduexperience: this.Data
        })
        .then(resp => {
          if (resp.status == 1) {
            this.Data = resp.data;
            this.$emit("changeData", {
              type: this.type,
              val: resp.data
            });
            this.$message({
              message: "保存成功",
              type: "success"
            });
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.eduexperience-module {
  background: #fff;
  color: #000;
  .create {
    padding-bottom: 20px;
  }
  .list-item-box {
    padding-top: 40px;
    position: relative;
    .deleteItem {
      position: absolute;
      right: 0px;
      top: 0px;
    }
  }
}
</style>

